<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>消息通知</title>
    <link rel="stylesheet" href="../../../css/mui.min.css" />
    <script src="../../../js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
    <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
    <link rel="stylesheet" href="../css/message.css " />
    <script src="../../../js/jquery-3.6.0.min.js"></script>
    <script src="../../../js/flexible.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/sm2.js"></script>
    <script src="../../../js/sm3.js"></script>
    <script src="../../../js/clipboard.js"></script>
    <script src="../../../npl/js/vant.mini.js"></script>
    <script src="../../../js/vconsole.min.js"></script>
    <script src="../../text.js" type="text/javascript"></script>

    <script src="../js/util.js" type="text/javascript"></script>

    <style>

    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="is-loading">
        <div class="curtain">
            <div class="loadingBgc">
                <div class="loader"></div>
            </div>
        </div>
    </div>
    <div class="trainTickets">
        <div class="header_tit">
            <van-nav-bar :title="headerTitle" left-arrow>
                <template #left>
                    <div class="back_l" @click="home">
                        <img src="../../../image/left.png" alt="" />
                    </div>
                </template>
                <template #right>
                    <div v-if="0 != currentMessageType && !multiChoose" class="select-all-btn active-brightness" @click="handleMultiChooseShow()">
                        选择
                    </div>
                    <div v-if="0 != currentMessageType && multiChoose" class="select-all-btn active-brightness" @click="handleMultiChooseCancel()">
                        取消
                    </div>
                </template>
            </van-nav-bar>
        </div>
        <div class="message-main" v-if="0 == currentMessageType">
            <div v-for="(item,index) in msgOptions" class="announcement-container">
                <div class="msg-header" @click="showMsgList(item.messageType)">
                    <div class="msg-subject">
                        <van-badge>
                            <span class="subject-cont">{{item.title}}</span>
                        </van-badge>
                    </div>
                    <div class="expand-btn" >
                        <van-icon :name="'arrow'" />
                    </div>
                </div>
            </div>
            <!-- <div class="announcement-container">
                <div class="msg-header" @click="expandAnnouncement()">
                    <div v-if="announcementRead" class="msg-subject">
                        <van-badge>
                            <span class="subject-cont">检修公告</span>
                        </van-badge>
                    </div>
                    <div v-else class="msg-subject">
                        <van-badge dot>
                            <span class="subject-cont">检修公告</span>
                        </van-badge>
                    </div>
                    <div class="expand-btn" >
                        <van-icon :name="announcementExpand?'arrow-down':'arrow'" />
                    </div>
                </div>
                <div class="msg-main" v-if="announcementExpand && announcementList.length > 0">
                    <van-swipe-cell v-for="(item,index) in announcementList" :key="index">
                        <div class="msg-content">
                            <div class="msg-title">{{item.title}}</div>
                            <div v-html="item.messageContent"></div>
                        </div>
                        <template #right>
                            <van-button class="delete-button" @click="deleteUserMessage(item)" icon="delete-o" square text="删除" type="danger">删除</van-button>
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
            <div class="sysMsg-container">
                <div class="msg-header" @click="expandSysMsg()">
                    <div v-if="sysMsgRead" class="msg-subject">
                        <van-badge>
                            <span class="subject-cont">系统消息</span>
                        </van-badge>
                    </div>
                    <div v-else class="msg-subject">
                        <van-badge dot>
                            <span class="subject-cont">系统消息</span>
                        </van-badge>
                    </div>
                    <div class="expand-btn" >
                        <van-icon :name="sysMsgExpand?'arrow-down':'arrow'" />
                    </div>
                </div>
                <div class="msg-main" v-if="sysMsgExpand && sysMsgList.length > 0">
                    <van-swipe-cell v-for="(item,index) in sysMsgList" :key="index">
                        <div class="msg-content">
                            <div class="msg-title">{{item.title}}</div>
                            <div v-html="item.messageContent"></div>
                        </div>
                        <template #right>
                            <van-button class="delete-button" @click="deleteUserMessage(item)" icon="delete-o" square text="删除" type="danger">删除</van-button>
                        </template>
                    </van-swipe-cell>
                </div>
            </div>
            <div class="sysMsg-container">
                <div class="msg-header" @click="expandVersion()">
                    <div v-if="versionRead" class="msg-subject">
                        <van-badge>
                            <span class="subject-cont">版本更新</span>
                        </van-badge>
                    </div>
                    <div v-else class="msg-subject">
                        <van-badge dot>
                            <span class="subject-cont">版本更新</span>
                        </van-badge>
                    </div>
                    <div class="expand-btn" >
                        <van-icon :name="versionExpand?'arrow-down':'arrow'" />
                    </div>
                </div>
                <div class="msg-main" v-if="versionExpand && versionList.length > 0">
                    <van-swipe-cell v-for="(item,index) in versionList" :key="index">
                        <div class="msg-content">
                            <div class="msg-title">{{item.title}}</div>
                            <div v-html="item.messageContent"></div>
                        </div>
                        <template #right>
                            <van-button class="delete-button" @click="deleteUserMessage(item)" icon="delete-o" square text="删除" type="danger">删除</van-button>
                        </template>
                    </van-swipe-cell>
                </div>
            </div> -->
        </div>
        <div class="message-main" v-if="0 != currentMessageType">
            <div :class="[!messageList||0==messageList.length?'card-list-empty':'card-list-main', multiChoose ? 'main-short' : 'main-all']">
                <van-checkbox-group class="card-group" v-model="checkMsgData">
                    <div :class="['card-main', 0 == index ? 'card-list-first': '']" v-for="(item,index) in messageList" @click="toggle(index, item)">
                        <div class="card-row">
                            <div class="card-content">
                                <div class="card-msg-title">{{item.title}}</div>
                                <div v-html="formatTime(item.messageCreateTime)"></div>
                            </div>
                            <div class="card-checkbox" v-if="multiChoose">
                                <van-checkbox :name="item" ref="checkboxes" />
                            </div>
                            <div class="card-expand-btn" v-else>
                                <van-icon :name="item.expand?'arrow-down':'arrow'" />
                            </div>
                        </div>
                        <div class="card-main-bottom" v-if="item.expand">
                            <div class="card-main-content" v-html="item.messageContent"></div>
                        </div>
                    </div>
                </van-checkbox-group>
            </div>
            <div class="msg-bottom" v-if="multiChoose">
                <div class="msg-bottom-left">
                    <van-checkbox class="msg-checkbox" v-model="chooseAll" 
                    @click="chooseMsgAllClick" icon-size="24px">全选</van-checkbox>
                </div>
                <div class="msg-bottom-right">
                    <van-button size="small" icon="../images/delete-b.png" @click="handleDeleteMsg">删除</van-button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/message.js"></script>
</body>
</html>
